<template>
  <div id="grid-setting">
    <el-form ref="gridSetting" :model="dataInfo.gadgetSetting" :rules="rules">
      <el-form-item :label="$t('custom.component.gadget.placeholderdefaultdaterange')">
        <el-select v-model="dataInfo.gadgetSetting.selectDate" clearable style="width:80%;" :placeholder="$t('custom.component.gadget.placeholder')">
          <el-option v-for="(item,index) in dateList" :key="index"  :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Date From QueryParams" prop="queryParams">
        <el-input v-model="dataInfo.gadgetSetting.queryParams[0]" :placeholder="$t('custom.component.gadget.placeholderenter')" ></el-input>
      </el-form-item>

      <el-form-item label="Date To QueryParams">
         <el-input v-model="dataInfo.gadgetSetting.queryParams[1]" :placeholder="$t('custom.component.gadget.placeholderenter')"></el-input>
      </el-form-item>
      <el-form-item label="Filter Label">
        <el-input v-model="dataInfo.gadgetSetting.label" :placeholder="$t('custom.component.gadget.placeholderenter')"></el-input>
      </el-form-item>
    </el-form>
    <!-- <div>{{$t('custom.component.gadget.placeholderdefaultdaterange')}}</div>
    <el-select v-model="dataInfo.gadgetSetting.selectDate" clearable style="width:80%;" :placeholder="$t('custom.component.gadget.placeholder')">
      <el-option v-for="(item,index) in dateList" :key="index"  :label="item.label" :value="item.value"></el-option>
    </el-select>
    <div>Date From QueryParams </div>
    <el-input v-model="dataInfo.gadgetSetting.queryParams[0]" :placeholder="$t('custom.component.gadget.placeholderenter')" ></el-input>
    <div :class="{'queryParams-form-item__error':true}">hahhhahahah</div>
    <div>Date To QueryParams</div>
    <el-input v-model="dataInfo.gadgetSetting.queryParams[1]" :placeholder="$t('custom.component.gadget.placeholderenter')"></el-input> -->
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    let validatequeryParams = (rule, value, callback) => {
      let str = this.dataInfo.gadgetSetting.queryParams[0].toLowerCase()
      if (str && (str === 'name' || str === 'pageid' || str === 'appid')) {
        callback(new Error('please do not set the QueryParams name to the reserved names: name, pageid, appid.'))
      } else {
        callback()
      }
    }
    return {
      dateList:
        [
          {
            'value': 'toDayStartDate',
            'label': 'Today'
          },
          {
            'value': 'yesterDayStartDate',
            'label': 'Yesterday'
          },
          {
            'value': 'weekStartDate',
            'label': 'Last 7 Days'
          },
          {
            'value': 'lastDayMonthStartDate',
            'label': 'Last 30 Days'
          },
          {
            'value': 'lastDayQuarterStartDate',
            'label': 'Last 90 Days'
          },
          {
            'value': 'weekStartBusinessDate',
            'label': 'Last 7 Business Days'
          },
          {
            'value': 'lastDayMonthStartBusinessDate',
            'label': 'Last 30 Business Days'
          },
          {
            'value': 'lastDayQuarterStartBusinessDate',
            'label': 'Last 90 Business Days'
          },
          {
            'value': 'currentMonthToTodayStart',
            'label': 'Month-to-Date'
          },
          {
            'value': 'currentSundayToTodayStart',
            'label': 'Week-to-Date'
          },
          {
            'value': 'lastWeekStartDate',
            'label': 'Last Week'
          },
          {
            'value': 'monthStartDate',
            'label': 'This Month'
          },
          {
            'value': 'lastMonthStartDate',
            'label': 'Last Month'
          },
          {
            'value': 'lastTwelveMonthStartDate',
            'label': 'Last 12 Months'
          },
          {
            'value': 'thisQuarterStartDate',
            'label': 'This Quarter'
          },
          {
            'value': 'lastQuarterStartDate',
            'label': 'Last Quarter'
          },
          {
            'value': 'thisYearStartDate',
            'label': 'This Year'
          },
          {
            'value': 'lastYearStartDate',
            'label': 'Last Year'
          }
        ],
      rules: {
        queryParams: [
          { validator: validatequeryParams, trigger: 'change' }
        ] }
    }
  },
  props: {
    dataInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  created () {
    this.getLastYearList()
  },
  methods: {
    getLastYearList () {
      var year = new Date().getFullYear()
      for (var i = 0; i <= 7; i++) {
        var temp = {
          label: (year - i).toString(),
          value: (i).toString()
        }
        this.dateList.push(temp)
      }
    },
    getData () {
      return this.dataInfo.gadgetSetting
    }
  }
}
</script>
<style scoped lang="scss">

#grid-setting ::v-deep  .el-form  {
  .el-form-item {
      margin-bottom: 20px !important;
    }
}
</style>
